import React, { useMemo, ReactNode } from 'react'

interface IProps {
  effect?: 'dark' | 'light';// 默认dark
  placement?: 'top' | 'bottom' | 'left' | 'right';
  content: string;
  children: ReactNode;
}
export default function GmTooltip(props: IProps) {
  const { effect = 'dark', placement = 'top', children } = props;
  const placementName = useMemo<string>(() => ('tooltip--' + placement), [placement]);
  return (
    <div className={`cell ${effect} ${placementName}`} aria-controls="top-left">
      {children}
      <style jsx>{`
        .cell {
          cursor: pointer;
          position: relative;
        }
        .dark {
          /* 被三角继承 */
          border-color: #b4a078;
        }
        .light {
          border-color: #F7F5F1;
        }

        .empty {
          /* 元素永远不会成为鼠标事件的target */
          background: transparent;
          cursor: default;
          pointer-events: none;
        }
        
        /* 显隐动画 */
        .cell[class*=tooltip--]::before,
        .cell[class*=tooltip--]::after {
          visibility: hidden;
          opacity: 0;
          transform: translate3d(0,0,0);
          transition: all .3s ease .05s;
        }
        .cell[class*=tooltip--]:hover::before,
        .cell[class*=tooltip--]:hover::after {
          visibility: visible;
          opacity: 1;
        }

        /* 填充内容 before为三角,after为内容 */
        .cell[class*=tooltip--]::before {
          content: '';
          position: absolute;
          width: 0; height: 0;
          border: 6px solid transparent;
        }
        .cell[class*=tooltip--]::after {
          content: attr(aria-controls);
          position: absolute;
          font-size: 12px;
          font-weight: normal;
          line-height: 12px;
          padding: 6px 12px;
          white-space: nowrap;
          border-radius: 2px;
          z-index: 100;
        }
        .cell[class*=dark]::after {
          color: white;
          background-color: #b4a078;
          box-shadow: 0px 0px 3px #b4a078;
        }
        .cell[class*=light]::after {
          color: #b4a078;
          background-color: #F7F5F1;
          /* 不规则投影 */
          filter: drop-shadow(1px 0px -1px rgba(180,160,120,.9));
        }

        /* 三角小标 */
        .cell[class*=tooltip--top]::before {
          border-top-color: inherit;
        }
        .cell.light[class*=tooltip--top]::before {
          filter: drop-shadow(0px 1px .5px rgba(180,160,120,.4));
        }
        .cell[class*=tooltip--right]::before {
          border-right-color: inherit;
        }
        .cell.light[class*=tooltip--right]::before {
          filter: drop-shadow(-1px 0px .5px rgba(180,160,120,.4));
        }
        .cell[class*=tooltip--bottom]::before {
          border-bottom-color: inherit;
        }
        .cell.light[class*=tooltip--bottom]::before {
          filter: drop-shadow(0px -1px .5px rgba(180,160,120,.4));
        }
        .cell[class*=tooltip--left]::before {
          border-left-color: inherit;
        }
        .cell.light[class*=tooltip--left]::before {
          filter: drop-shadow(1px 0px .5px rgba(180,160,120,.4));
        }

        /* top && bottom 位置及动画 */
        .cell[class*=tooltip--top]::before,
        .cell[class*=tooltip--bottom]::before {
          left: calc(50% - 6px);
        }
        .cell[class*=tooltip--top]::after,
        .cell[class*=tooltip--bottom]::after {
          left: 50%;
          transform: translateX(-50%);
        }
        .cell[class*=tooltip--top]::before {
          top: 0px;
        }
        .cell[class*=tooltip--top]:hover::before {
          transform: translateX(0%) translateY(-10px);
        }
        .cell[class*=tooltip--top]::after {
          bottom: 100%;
          margin-bottom: -1px;
        }
        .cell[class*=tooltip--top]:hover::after {
          transform: translateX(-50%) translateY(-10px);
        }
        .cell[class*=tooltip--bottom]::before {
          bottom: 0;
        }
        .cell[class*=tooltip--bottom]:hover::before {
          transform: translateX(0%) translateY(10px);
        }
        .cell[class*=tooltip--bottom]::after {
          top: 100%;
          margin-top: -1px;
        }
        .cell[class*=tooltip--bottom]:hover::after {
          transform: translateX(-50%) translateY(10px);
        }

        /* left && right 位置及动画 */
        .cell[class*=tooltip--right]::before,
        .cell[class*=tooltip--left]::before {
          top: calc(50% - 6px);
        }
        .cell[class*=tooltip--right]::after,
        .cell[class*=tooltip--left]::after {
          top: 50%;
          transform: translateY(-50%);
        }
        .cell[class*=tooltip--right]::before {
          right: 0;
        }
        .cell[class*=tooltip--right]:hover::before {
          transform: translateX(10px) translateY(0%);
        }
        .cell[class*=tooltip--right]::after {
          left: 100%;
          margin-left: -1px;
        }
        .cell[class*=tooltip--right]:hover::after {
          transform: translateX(10px) translateY(-50%);;
        }
        .cell[class*=tooltip--left]::before {
          left: 0;
        }
        .cell[class*=tooltip--left]:hover::before {
          transform: translateX(-10px) translateY(0%);
        }
        .cell[class*=tooltip--left]::after {
          right: 100%;
          margin-right: -1px;
        }
        .cell[class*=tooltip--left]:hover::after {
          transform: translateX(-10px) translateY(-50%);;
        }
      `}</style>
      {/*
        什么是“CSS Filter Effects”？
        <iframe src="https://www.bestagencies.com/tools/filter-effects-css-generator/" width="100%" height="429px"></iframe>
      */}
    </div>
  )
}
